<script setup>
import { ref } from 'vue'

// 武器分类
const categories = ref([
  { id: 'assault', name: '突击步枪' },
  { id: 'sniper', name: '狙击枪' },
  { id: 'smg', name: '冲锋枪' },
  { id: 'shotgun', name: '霰弹枪' },
  { id: 'light', name: '轻机枪' },
  { id: 'pistol', name: '手枪' }
])

// 热门武器数据
const popularWeapons = ref([
  {
    id: 1,
    name: 'M416',
    type: 'assault',
    description: '综合性能最稳定的突击步枪，适合各种距离战斗',
    damage: 41,
    fireRate: 88,
    accuracy: 71,
    imageUrl: 'https://picsum.photos/id/239/400/300'
  },
  {
    id: 2,
    name: 'AWM',
    type: 'sniper',
    description: '游戏中伤害最高的狙击枪，可一枪秒杀三级头',
    damage: 120,
    fireRate: 10,
    accuracy: 95,
    imageUrl: 'https://picsum.photos/id/240/400/300'
  },
  {
    id: 3,
    name: 'UZI',
    type: 'smg',
    description: '射速最快的冲锋枪，近距离战斗之王',
    damage: 23,
    fireRate: 100,
    accuracy: 53,
    imageUrl: 'https://picsum.photos/id/241/400/300'
  },
  {
    id: 4,
    name: 'SKS',
    type: 'sniper',
    description: '半自动精确射手步枪，中远距离压制利器',
    damage: 53,
    fireRate: 46,
    accuracy: 61,
    imageUrl: 'https://picsum.photos/id/242/400/300'
  }
])

// 武器配件推荐
const recommendedAttachments = ref({
  optics: ['红点瞄准镜', '全息瞄准镜', '4倍瞄准镜', '6倍瞄准镜'],
  grips: ['垂直握把', '直角前握把', '激光瞄准器', '半截式握把'],
  magazines: ['快速弹匣', '扩容弹匣', '快速扩容弹匣'],
  stocks: ['战术枪托', 'UZI枪托', 'M416枪托']
})
</script>

<template>
  <div class="weapons-view">
    <div class="container">
      <h1 class="page-title">武器攻略</h1>
      
      <!-- 武器分类 -->
      <div class="categories">
        <button 
          v-for="category in categories"
          :key="category.id"
          class="category-btn"
          :class="{ active: activeCategory === category.id }"
          @click="activeCategory = category.id"
        >
          {{ category.name }}
        </button>
      </div>
      
      <!-- 热门武器 -->
      <section class="section">
        <h2 class="section-title">热门武器</h2>
        <div class="weapons-grid">
          <div v-for="weapon in popularWeapons" :key="weapon.id" class="weapon-card">
            <div class="weapon-image" :style="{ backgroundImage: `url(${weapon.imageUrl})` }"></div>
            <div class="weapon-info">
              <h3 class="weapon-name">{{ weapon.name }}</h3>
              <p class="weapon-description">{{ weapon.description }}</p>
              <div class="weapon-stats">
                <div class="stat-item">
                  <span class="stat-label">伤害</span>
                  <div class="stat-bar">
                    <div class="stat-fill" :style="{ width: weapon.damage + '%' }"></div>
                  </div>
                  <span class="stat-value">{{ weapon.damage }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">射速</span>
                  <div class="stat-bar">
                    <div class="stat-fill" :style="{ width: weapon.fireRate + '%' }"></div>
                  </div>
                  <span class="stat-value">{{ weapon.fireRate }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">精度</span>
                  <div class="stat-bar">
                    <div class="stat-fill" :style="{ width: weapon.accuracy + '%' }"></div>
                  </div>
                  <span class="stat-value">{{ weapon.accuracy }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 配件推荐 -->
      <section class="section">
        <h2 class="section-title">配件推荐</h2>
        <div class="attachments-container">
          <div v-for="(attachments, type) in recommendedAttachments" :key="type" class="attachment-category">
            <h3 class="attachment-type">{{ getAttachmentTypeName(type) }}</h3>
            <div class="attachment-list">
              <span v-for="(attachment, index) in attachments" :key="index" class="attachment-tag">
                {{ attachment }}
              </span>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 武器搭配推荐 -->
      <section class="section">
        <h2 class="section-title">武器搭配推荐</h2>
        <div class="loadout-suggestions">
          <div class="loadout-item">
            <h3>近战钢枪流</h3>
            <p>M416 + UZI + 红点瞄准镜 + 垂直握把</p>
          </div>
          <div class="loadout-item">
            <h3>中远距离压制</h3>
            <p>M416 + SKS + 4倍瞄准镜 + 6倍瞄准镜</p>
          </div>
          <div class="loadout-item">
            <h3>狙击手套装</h3>
            <p>Kar98k + Vector + 8倍瞄准镜 + 红点瞄准镜</p>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeCategory: 'assault'
    }
  },
  methods: {
    getAttachmentTypeName(type) {
      const typeNames = {
        optics: '瞄准镜',
        grips: '握把',
        magazines: '弹匣',
        stocks: '枪托'
      }
      return typeNames[type] || type
    }
  }
}
</script>

<style scoped>
.weapons-view {
  padding: 2rem 0;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-title {
  font-size: 2.5rem;
  color: var(--color-pubg-primary);
  text-align: center;
  margin-bottom: 2rem;
}

.categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.category-btn {
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--color-pubg-primary);
  background-color: transparent;
  color: var(--color-pubg-primary);
  border-radius: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-weight: 500;
}

.category-btn:hover {
  background-color: var(--color-pubg-primary);
  color: white;
}

.category-btn.active {
  background-color: var(--color-pubg-primary);
  color: white;
}

.section {
  margin-bottom: 3rem;
}

.section-title {
  font-size: 1.8rem;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background-color: var(--color-pubg-primary);
}

.weapons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.weapon-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.weapon-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.weapon-image {
  height: 200px;
  background-size: cover;
  background-position: center;
}

.weapon-info {
  padding: 1.5rem;
}

.weapon-name {
  font-size: 1.5rem;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.weapon-description {
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.weapon-stats {
  margin-top: 1rem;
}

.stat-item {
  margin-bottom: 0.8rem;
}

.stat-label {
  display: inline-block;
  width: 60px;
  font-weight: 500;
}

.stat-bar {
  display: inline-block;
  width: calc(100% - 120px);
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 10px;
  vertical-align: middle;
}

.stat-fill {
  height: 100%;
  background-color: var(--color-pubg-primary);
  transition: width 0.3s ease;
}

.stat-value {
  display: inline-block;
  width: 40px;
  text-align: right;
  font-weight: 500;
}

.attachments-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.attachment-category {
  background-color: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.attachment-type {
  font-size: 1.2rem;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.attachment-tag {
  background-color: var(--color-pubg-primary-light);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.9rem;
}

.loadout-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.loadout-item {
  background-color: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--color-pubg-primary);
}

.loadout-item h3 {
  color: var(--color-pubg-primary);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.loadout-item p {
  color: var(--color-text);
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .weapons-grid,
  .attachments-container,
  .loadout-suggestions {
    grid-template-columns: 1fr;
  }
  
  .categories {
    flex-direction: column;
    align-items: center;
  }
  
  .category-btn {
    width: 100%;
    max-width: 300px;
  }
}
</style>